/*
 * @Description: 云卡充值页面
 * @Author: ziwei.ma
 * @Date: 2019-05-06 15:40:01
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-30 13:56:57
 */
<template>
  <div id="app">
    <div class="page">
      <!-- <top-banner></top-banner> -->
      <div class="banner-warpper">
        <banner
          width="10rem"
          height="4.266667rem"
          :bannerEnName="bannerName"
        ></banner>
      </div>
      <recharge-method
        @setBtnColor="getBtnColor"
        ref="getPhoneNumber"
      ></recharge-method>
      <recharge-amount
        cardType="BusCard"
        @setSkuObj="getSKU"
      ></recharge-amount>

      <!-- 优惠券选择栏 -->
      <div
        class="coupon-wrapper flex-h flex-hsb"
        @click="clickCoupon"
      >
        <span class="fontsize28">选择优惠券</span>
        <div class="coupon-selection">
          <span class="fontsize28">{{couponsName}}</span>
          <i class="icon iconfont icon-rightangel"></i>
        </div>
      </div>

      <payment-method
        cardType="BusCard"
        @setPayments="getPaymentMethod"
      ></payment-method>
    </div>
    <div
      class="pay-btn fontsize28 "
      @click="comfirmPay"
      :class="isPhoneNoRecharge?'baseBgColorInvalid':'baseBgColorNoActive'"
    >确认支付</div>
    <buscard-coupon
      ref="mask"
      :isCouponsList="couponsList"
      @setCouponIndex="getCouponIndex"
    ></buscard-coupon>
  </div>
</template>

<script>
import { Banner } from 'vue-xb-ui-depot'
import RechargeMethod from '../components/RechargeMethod'
import PaymentMethodVue from '../components/PaymentMethod.vue'
import RechargeAmountVue from '../components/RechargeAmount.vue'
// import { setTimeout } from 'timers'
import { getCouponsList } from '../api/api.js'
// import { go, goByUsualUrl } from 'vue-xiaobu-utils'
import BusCardCouponVue from '../components/BusCardCoupon.vue'
import { CouponsModel } from '../model/CouponsModel'
import { BUS_CARD_INSTANCE } from '@/constants/CardInstance'
import RechargeMixinVue from './RechargeMixin.vue'

export default {
  name: 'App',
  mixins: [RechargeMixinVue],
  components: {
    'recharge-method': RechargeMethod,
    'payment-method': PaymentMethodVue,
    'recharge-amount': RechargeAmountVue,
    'banner': Banner,
    'buscard-coupon': BusCardCouponVue
  },
  data() {
    return {
      bannerName: window.APP_VIRTUAL_RECHARGE, // 顶部banner广告位
      // isPhoneNoRecharge: false, // 手机号充值-获取到的支付按钮状态
      // isClicked: false, // 支付按钮是否被点击,false表示可点击
      // isPayment: true, // 是否获取到支付方式
      paymentType: '', // 支付方式
      phoneNumber: '', // 获取到的手机号码
      // skuid: '', // SKUid获取
      // salePrice: '', // 支付金额
      couponsName: '', // 获取到的优惠券的NAME
      couponsList: [], // 获取到的优惠券列表
      couponsCount: 0, // 优惠券数量
      couponsId: '', // 优惠券ID
      cardNo: '', // 获取的代充卡号
      cardType: BUS_CARD_INSTANCE // 云卡卡实例ID
    }
  },
  mounted() {
    window.onResume = () => {
      this.isClicked = false
      this.conponsList()
    }
    this.$UI.then(UI => {
      UI.setTitle('出行余额充值', () => { }, () => { })
    })
  },
  methods: {
    // 根据充值方式切换确定支付按钮颜色（快速充值/手机号充值）
    getBtnColor(isPhoneNoRecharge, cardNo) {
      this.isPhoneNoRecharge = isPhoneNoRecharge
      console.log('this.isPhoneNoRecharge', this.isPhoneNoRecharge)
      this.cardNo = cardNo
    },
    // 获取SKU对象
    getSKU(skuid, salePrice) {
      this.skuid = skuid
      console.log('商品SKUid：' + this.skuid)
      this.salePrice = salePrice
      this.conponsList()
    },
    // 获取选中的coupon对象的下标
    getCouponIndex(index) {
      this.index = index
      this.couponsList.forEach(item => {
        item.couponsState = false
      })
      this.couponsList[index].couponsState = true
      this.couponsName = this.couponsList[index].couponsName
      this.couponsId = this.couponsList[index].couponsID
    },
    // 点击显示优惠券列表
    clickCoupon() {
      if (this.couponsCount === 0) {
        this.$refs.mask.hide()
      } else {
        this.$refs.mask.show()
      }
    },
    getPhoneNum() {
      return this.$refs.getPhoneNumber.getPhoneNum()
    },
    // 发送协议获取优惠券列表
    conponsList() {
      getCouponsList('jhxbus', this.skuid, 1).then(res => {
        this.couponsCount = res.count
        this.couponsName = ''
        res.list.forEach(item => {
          if (item.couponsState === 1 && !this.couponsName) {
            this.couponsName = item.couponsName
            this.couponsId = item.couponsID
          }
        })
        if (this.couponsCount > 0) {
          if (!this.couponsName) {
            this.couponsName = res.list[0].couponsName
            this.couponsId = res.list[0].couponsID
            res.list[0].couponsState = true
          }
        } else {
          this.couponsName = '没有可用'
          this.couponsId = null
        }
        res.list.push(new CouponsModel('不使用优惠券', this.salePrice, ''))
        this.couponsList = res.list
      }).catch(() => {

      })
    }

  }
}
</script>

<style>
html,
body,
#app {
  height: 100%;
  background-color: #eeeeee;
}
.page {
  height: calc(100% - 98px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pay-btn {
  display: inline-block;
  width: 750px;
  height: 98px;
  line-height: 98px;
  color: #ffffff;
  text-align: center;
}
/* 广告位 */
.banner-warpper {
  width: 750px;
  height: 320px;
}
/* 优惠券选择栏 */
.coupon-wrapper {
  background-color: #ffffff;
  height: 80px;
  border-bottom: 1px solid #cccccc;
}
.coupon-wrapper > span {
  margin: 20px 30px;
  color: #333333;
}
.coupon-selection {
  margin: 20px 30px;
}
.coupon-selection > span {
  color: #cccccc;
  margin-right: 33px;
}
</style>
